<template>
    <div class="select">
        <div class="select-title">
            <p :class="{animate:isShow,wo:isHidden}"><span>为什么选择FARM</span></p>
            <section :class="{animate2:isShow,wo:isHidden}">我们是现代公司，历史悠久</section>
        </div>
        <div class="select-list clearfix" :class="{animate4:isShow,wo:isHidden}">
            <ul>
                <li :class="{animate3:isShow,wo:isHidden}">
                    <img src="../assets/images/sun.jpg" alt="">
                    <div>
                        <p><span>产品范围</span></p>
                        <section>我们正在种植不同的蔬菜，水果和谷物</section>
                    </div>
                </li>
                <li :class="{animate3:isShow,wo:isHidden}">
                    <img src="../assets/images/car.jpg" alt="">
                    <div>
                        <p><span>智能物流</span></p>
                        <section>将我们的产品运送到您的地方是我们公司的一项容易任务！</section>
                    </div>
                </li>
                <li :class="{animate3:isShow,wo:isHidden}">
                    <img src="../assets/images/flower.jpg" alt="">
                    <div>
                        <p><span>品质保证</span></p>
                        <section>我们决心尽可能保持我们所有农产品的质量</section>
                    </div>
                </li>
                <li :class="{animate3:isShow,wo:isHidden}">
                    <img src="../assets/images/person.jpg" alt="">
                    <div>
                        <p><span>经验服务团队</span></p>
                        <section>我们专家花了几年的时间，去做好我们的技术和专业知识</section>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                isShow:false,
                isHidden:true  
            }
        }, 
        mounted(){
            window.addEventListener('scroll',function(){ 
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
                if(scrollTop >= 1000){
                   this.isShow = true;
                   this.isHidden = false;
            }
        }.bind(this))
    }
}
</script>
<style scoped>
  p{margin:0;padding:0;}
  li{list-style:none; }
  section{font-size:14px;color: inherit;}
 
   .select{
       width:80%;
       margin: 100px auto;
       color: rgba(31,37,38,.75);
   }
   .select-title{
       text-align:center;
       line-height:35px;
   }
   .select-title p{
       font-size: 30px;
       color: rgb(51, 51, 51);
   }
    .select-list{
        display:table;
        margin: 40px auto;
    }
    .select-list li{
        width:270px;
        float:left;
        margin:0 10px;
        text-align:center;
    }
    .select-list li img{
        width:155px;
        height:125px;
        transition: all 0.3s ease-out;
    }
    .select-list li img:hover{
        transform:scale(1.2);
    }
    .select-list div{
        margin-top:10px;
    }
    .select-list div p{
        font-size:22px;
        line-height:55px;
    }

    .clearfix:after {
       content: " ";
       display: block;
       clear: both;
       height: 0;
    }
    .clearfix {
      zoom: 1;
    }
</style>